<script setup>
import { ref } from 'vue'

const props = defineProps({
  data: {
    type: Object,
    required: true
  }
})

const getStatusColor = (status) => {
  const colors = {
    '良好': '#67C23A',
    '注意': '#E6A23C',
    '警告': '#F56C6C'
  }
  return colors[status] || '#909399'
}
</script>

<template>
  <div class="chassis-prediction-card">
    <div class="card-header">
      <h2><i class="el-icon-cpu"></i> 底盘关键部件寿命预测</h2>
    </div>

    <div class="card-content">
      <div v-for="(component, key) in data" :key="key" class="component-item">
        <div class="component-header">
          <span class="component-name">{{ component.name }}</span>
          <el-tag :color="getStatusColor(component.status)" size="small">
            {{ component.status }}
          </el-tag>
        </div>

        <div class="rul-container">
          <div class="rul-value">
            <span class="value">{{ component.rul }}</span>
            <span class="unit">小时</span>
          </div>
          <div class="rul-bar">
            <div
                class="rul-progress"
                :style="{
                width: `${(component.rul / 500) * 100}%`,
                backgroundColor: getStatusColor(component.status)
              }"
            ></div>
          </div>
        </div>

        <div class="prediction-text">
          {{ component.prediction }}
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.chassis-prediction-card {
  background: linear-gradient(135deg, #1a2a52, #152245);
  border-radius: 1.2vw;
  padding: 1vw;
  box-shadow: 0 0.6vw 1.6vw rgba(0, 0, 0, 0.3);
  border: 0.1vw solid #2a3a6a;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.card-header {
  margin-bottom: 1vw;
  border-bottom: 0.1vw solid #2a3a6a;
}

.card-header h2 {
  font-size: 1.2vw;
  color: #e4e8f0;
  display: flex;
  align-items: center;
  gap: 1vw;
}

.card-content {
  flex: 1;
  overflow-y: auto;
}

.component-item {
  margin-bottom: 1vw;
  padding: 0.5vw;
  background: rgba(20, 35, 70, 0.5);
  border-radius: 0.8vw;
}

.component-item:last-child {
  margin-bottom: 0;
}

.component-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1vw;
}

.component-name {
  font-weight: 500;
  color: #e4e8f0;
  font-size: 1vw;
}

.rul-container {
  display: flex;
  align-items: center;
  gap: 1.5vw;
  margin: 1vw 0;
}

.rul-value {
  display: flex;
  align-items: baseline;
  gap: 0.5vw;
}

.rul-value .value {
  font-size: 1vw;
  font-weight: bold;
  color: #e4e8f0;
}

.rul-value .unit {
  font-size: 1vw;
  color: #a0b1d0;
}

.rul-bar {
  flex: 1;
  height: 0.8vw;
  background-color: #2a3a6a;
  border-radius: 0.4vw;
  overflow: hidden;
}

.rul-progress {
  height: 100%;
  border-radius: 0.4vw;
  transition: width 0.5s ease;
}

.prediction-text {
  font-size: 1vw;
  color: #4facfe;
  margin-top: 0.5vw;
}
</style>